<template>
  <div class="w_h_100">
    <div class="box">
      <div class="inlet">系统管理 > 流程管理 > <span class="size">表单管理</span></div>
      <myform :fields="fields" :model="values" class="m_t_10">
        <template v-slot:button>
          <el-button @click="resetting">重置</el-button>
          <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
        </template>
      </myform>
    </div>
    <div class="mytable m_t_10 ">
      <div class="d_f j_c_s_b a_i_c">
        <h4>表单列表</h4>
        <el-button type="primary" :icon="Plus" @click="addForm" v-hasPerm="'addForm'">新增表单</el-button>
      </div>
      <mytable :fields="tableFields" width="150" ref="tableRef" :values="values" api="unitFormfind" class="m_t_10"
        :isSelection="false">
        <template v-slot:operation="{ row }">
          <div class="d_f j_c_s_b">
            <span class="edit" @click="edit(row)" v-hasPerm="'editForm'">编辑</span>
            <span class="success" @click="configuration(row)" v-hasPerm="'configurationForm'">配置表单</span>
            <span class="error" @click="deleteOut(row.id)" v-hasPerm="'deleteForm'">删除</span>
          </div>
        </template>
      </mytable>
    </div>
    <el-drawer v-model="show" :title="title" size="920px" direction="rtl" :before-close="handleClose">
      <div class="bigForm">
        <myform :fields="editFields"  ref="ruleFrom" :model="model" :inline="false" labelPosition="top" :rules="rules"
          class="m_t_16">
         <template v-slot:ids>
          <el-transfer target-order="push"  filterable
    :filter-method="filterMethod"
    filter-placeholder="请输入" v-model="model.ids" :props="props" :data="transfer" />
         </template>
        </myform>
      </div>
      <div class="d_f j_c_c">
        <el-button type="primary" @click="save" v-myRepeat>保存</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { copy, objectMatching } from '../../../utils/date'
import { Search, Plus } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { Message } from '../../../utils/resetMessage'
import {useRouter} from 'vue-router'
import {flowPathFormType} from '../../../type/system'
import {unitFormMod,unitFormAdd,unitFormDel,formList,unitFormGet} from '../../../api/system/flowPath'
const values = {
  name:'',
}
const model = {
  id:0,
  name:'',
  formIds:[],
  ids:[],
  remark:'',
}
export default defineComponent({
  name: '',
  setup() {
    const data:flowPathFormType = reactive({
      show:false,
      model:copy(model),
      editFields:[
      {
          label: "大表单名称",
          prop: 'name',
          placeholder: '请输入',
          type: 'input',
          labelWidth: '70px'
        },
        {
          label: "小表单集合",
          prop: 'ids',
          labelWidth: '70px'
        },
        {
          label: "备注",
          prop: 'remark',
          placeholder: '请输入',
          type: 'textarea',
          labelWidth: '70px'
        },
      ],
      fields: [
        {
          label: "表单名称",
          prop: 'name',
          placeholder: '请输入',
          type: 'input',
          labelWidth: '70px'
        },
        {
          prop: 'button'
        }
      ],
      values: copy(values),
      tableFields:[
        {
          label:'表单名称',
          prop:'name',
        },
        {
          label:'备注',
          prop:'remark',
        },
      ],
      transfer:[],
      arrList:[],
      title:'新增表单',
      rules:{
        name: [
          { required: true, message: '请输入大表单名称', trigger: 'blur' },
        ],
        ids: [
          { required: true, message: '请选择小表单集合', trigger: 'blur' },
        ],
      },
      props:{
         label:'label',
         key:'id'
      }
    })
    const router =useRouter()
    onBeforeMount(() => {
      methods.getData()
    })
    const tableRef = ref()
    const ruleFrom=ref()
    const methods = {
      //获取所有小表单
      getData(){
        formList({}).then((res:any)=>{
          let arr=res.filter((item:any)=>{
               return item.status==1
          })
          arr.map((item:any)=>{
            item.label=`${item.name}(${item.tagName})`
            item.id=String(item.id)
          })
           data.transfer=copy(arr)
           data.arrList=copy(arr)
        })
      },
      //表格数据重置
      resetting() {
        data.values = copy(values)
        tableRef.value.resettingTable(data.values)
      },
      //列表根据筛选条件搜索
      searchFor() {
        tableRef.value.handleCurrentChange(1)
      },
      edit(row:any){
        data.title='修改表单'
        unitFormGet({id:row.id}).then((res:any)=>{
          data.model=objectMatching(res,data.model)

          data.model.ids=res.forms.map((item:any)=>{
            return String(item.id)
          })
          // data.transfer=data.arrList.filter((item:any)=>{
          //   return data.model.ids.some((item1:string|number)=>item.id!=item1)
          // })
          data.show=true
        })
     
      },
      //添加大表单
      addForm(){
        data.title='新增表单'
        data.show=true
      },
        //关闭弹窗
        handleClose() {
        ElMessageBox.confirm(
          '当前信息将不再保存?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            ruleFrom.value.resetFields()//重置表单
            data.show = false
            data.model = copy(model)
          })
      },
         //添加大表单保存按钮事件
         save(){
        ruleFrom.value.verification().then(()=>{
          let arr:any =[]
          data.model.ids.map((item:any,index:number)=>{
            arr.push({id:item,sortBy:index})
          })
          data.model.formIds=arr
          if(!data.model.id){
            unitFormAdd(data.model).then(()=>{
              Message({type:'success',message:'添加成功'})
              tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
              data.show=false//关闭弹窗
              ruleFrom.value.resetFields()//重置表单
              data.model=copy(model)//重置表单绑定数据
            })
          }else{
            unitFormMod(data.model).then(()=>{
              Message({type:'success',message:'修改成功'})
              tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
              data.show=false//关闭弹窗
              ruleFrom.value.resetFields()//重置表单
              data.model=copy(model)//重置表单绑定数据
            })
          }
        })
      },
      //删除当前表单
      deleteOut(id:number){
          ElMessageBox.confirm(
            '是否删除当前表单?',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error',
            }
          )
            .then(() => {
              unitFormDel({id:id}).then(()=>{
                Message({type:'success',message:'删除成功'})
                tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
              })
            })
        },
        configuration(row:any){
          router.push({path:'/system/flowPath/childForm/detail',query:{id:row.id,type:'bigForm'}})
        },
        filterMethod(query:any, item:any){
          return item.label.indexOf(query) > -1
        }
    }
    return {
      ...toRefs(data),
      ...methods, tableRef, Search, Plus,ruleFrom
    }
  }
})
</script>
<style scoped lang='scss'>
.box {
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  height: 70px;
  padding: 10px 32px;
  margin-top: 10px;
}

.mytable {
  overflow-y: auto;
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 10px 32px;
  height: calc(100% - 125px);
}
</style>
<style lang="scss">
.bigForm{
  .el-input{
    width: 100% !important;
  }
}
</style>